<template>
    <div class="container">
        <el-form :model="form" label-width="auto">
            <el-form-item label="房间名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="房间面积">
                <el-input v-model="form.area"></el-input>
            </el-form-item>
            <el-form-item label="最大接待人数">
                <el-input v-model="form.maxPeople"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="form.remark"></el-input>
            </el-form-item>
            <el-form-item label="背景图">
                <el-upload
                    :headers="myHeaders"
                    :action="uploadsrc"
                    accept="image/jpeg,image/gif,image/png"
                    list-type="picture-card"
                    :before-upload="handleBeforeUpload"
                    :on-success="uploadLogoSuccess"
                    :on-remove="handleRemove"
                    :on-error="uploadError"
                    :file-list="img"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="房间介绍">
                <quill-editor ref="myTextEditor" v-model="form.introduce" @change="introduceHtml"> </quill-editor>
            </el-form-item>
            <el-form-item>
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { dynamicHeader } from '../../../utils/dcf2d0812e764796a97bb2e8c1725fab.js';
import { uploadsrc } from '../../../utils/dcf2d0812e764796a97bb2e8c1725fab.js';
const geturlkey = require('../../../utils/geturlkey');
export default {
    data() {
        return {
            form: {
            },
            img: [],
            option: [
                { label: '房间', value: '1' },
                { label: '大厅', value: '2' },
                { label: '走廊', value: '3' }
            ],
            myHeaders: {}
        };
    },
    created() {
        this.uploadsrc = uploadsrc;
        this.form.roomId = geturlkey.getUrlKey('roomId');
        this.houseDetail(geturlkey.getUrlKey('roomId'));
    },
    methods: {
        houseDetail(e) {
            houseDetail(e).then(
                (res) => {
                    if(res.returnCode==200){
                        let arr = []
                        if(res.data.images){
                            res.data.images = res.data.images.split(',')
                            for(let i=0;i<res.data.images.length;i++){
                                let data = {
                                    url:res.data.images[i]
                                }
                                arr.push(data)
                            }
                            this.img = arr
                        }
                        res.data.createTime=""
                        res.data.updateTime=""
                        this.form = res.data
                    }
                },
                (err) => {}
            );
        },
        introduceHtml({ editor, html, text }) {
                this.form.introduce = html;
            },
        handleBeforeUpload(file) {
            this.getmyHeaders();
        },
        getmyHeaders() {
            var dHeader = dynamicHeader();
            this.myHeaders.signature = dHeader.signature;
            this.myHeaders.nonce = dHeader.nonce;
            this.myHeaders.timestamp = dHeader.timestamp;
            this.myHeaders.appkey = dHeader.appkey;
            this.myHeaders.token = dHeader.token;
        },
        uploadLogoSuccess(data) {
            if (data.returnCode == 200) {
               let imgUrl = {
                    url: data.data
                };
                this.img.push(imgUrl);
            } else {
                this.$message.error(`上传失败，请重新上传`);
            }
        },
        handleRemove(file, fileList) {
            for(let i=0;i<this.img.length;i++){
                if(this.img[i].url==file.url){
                    this.img.splice(i,1)
                }
            }
        },
        uploadError() {
            this.$message.error(`上传失败，请重新上传`);
        },
        submit() {
            let arr = []
            for(let i=0;i<this.img.length;i++){
                arr.push(this.img[i].url)
            }
            this.form.images=arr.join(',')
            houseDetail(this.form).then(res=>{
                this.$message.success("修改成功")
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            },err=>{
                this.$message.error("修改失败")
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            })
        },
        cancel() {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        }
    }
};
</script>
<style >
.hide .el-upload--picture-card {
    display: none;
}
</style>